{% extends 'layout/indexframe.html' %}

{% block title %}man{% endblock %}

{% block css %}
    <style>
        th {
            font-size: 20px;
            text-align: center;
        }

        td {
            font-size: 20px;
            text-align: center;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
    </style>
{% endblock %}

{% block content %}

    <div class="wrapper wrapper-content animated fadeInRight">
        <div style="margin-bottom: 10px;" class="clearfix">
            <div><a id="adddev" class="btn btn-primary" href="#">
                添加设备</a>
                <div style="float:right;width: 300px;">
                    <form method="get">
                        <div class="input-group">

                            <input type="text" name="q" class="form-control" placeholder="输入设备名查询..."
                                   value={{ value }}>
                            <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">查询</button>
                    </span>

                        </div>
                    </form>
                </div>
            </div>

            {#设备表单#}
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h1 class="modal-title" id="myModalLabel" style="text-align: center">
                                <strong>添加设备</strong></h1>
                        </div>
                        <div class="modal-body">
                            <form id="formadd">
                                <div class="clearfix">
                                    {% for field in form %}
                                        {#class="col-xs-6"#}
                                        <div>
                                            <div class="form-group">
                                                <label><strong>{{ field.label }}</strong></label>
                                                {{ field }}
                                                <span class="error-msg">{{ field.errors.0 }}</span>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input id="formSub" type="button" class="btn btn-primary" value="保存设备">
                        </div>
                    </div>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-heading" style="font-size: 40px;text-align: center;background-color: #9ea6b9;">
                    设备管理
                </div>


                <table class="table">
                    <thead>
                    <tr>
                        <th>设备名</th>
                        <th>Topic</th>
                        <th>符号</th>
                        <th>类型</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for obj in queryset %}
                        <tr>
                            <td>{{ obj.devname }}</td>
                            <td>{{ obj.devtopic }}</td>
                            <td>{{ obj.devsym }}</td>
                            <td>{{ obj.devtype }}</td>
                            <td id="{{ obj.id }}a">{{ obj.flag }}</td>
                            <td>
                                {% if obj.send_flag == '2' %}
                                    <a mid="{{ obj.id }}" class="btn btn-primary btn-xs pubbtn"
                                       style="font-size: 20px;">发布</a>
                                    <a delid="{{ obj.id }}" class="btn btn-danger btn-xs btn-del"
                                       style="font-size: 20px;">删除</a>
                                {% else %}
                                    <a mid="{{ obj.id }}" class="btn btn-primary btn-xs btn-subb"
                                       style="font-size: 20px;">订阅操作</a>
                                    <a delid="{{ obj.id }}" class="btn btn-danger btn-xs btn-del"
                                       style="font-size: 20px;">删除</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            <div style="text-align: center;">
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-lg">
                        {{ page_str }}
                    </ul>
                </nav>
            </div>


        </div>

    </div>
    {#管理页面发布#}
    <div class="modal fade" id="myModalsub" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong
                            id="pubtitle">发布主题</strong></h1>
                </div>
                <div class="modal-body">

                    <div class="clearfix">
                        <div style="text-align: center">
                            <h2><strong>可挑选以下两种方式</strong></h2>
                        </div>
                        <div style="margin-left: 100px;">
                            <div class="form-group">
                                <div>
                                    <label><h2><strong>开关</strong></h2></label>
                                    <a tabindex="0" class="btn btn-sm" role="button" data-toggle="popover" data-trigger="focus" title="注意事项" data-placement='top' data-content="系统自带的开关默认发送为开-'open'与关-'close'。　　　　　　　
                                    　　　　　自定义data无需添加引号即可识别为字符串。"><span class="fa fa-calendar-o"></span></a>
                                    <input id="pubopen" type="button" class="btn btn-success" style='margin-left: 50px;' value="开启" >
                                    <input id="pubclose" type="button" class="btn btn-danger" style='margin-left: 50px;' value="关闭">
                                    <span id="pubmes" style="color: #009900;"></span>
                                </div>
                                <div>
                                    <label><h2><strong>自定义Data</strong></h2></label>
                                    <div id="mes"><textarea id="senddata" style="height: 50px;"></textarea></div>
                                    <span id="sendmes" style="color: #009900;"></span>
                                </div>

                            </div>
                            <div><input id="pubdata" type="button" class="btn btn-primary" style='margin-left: 220px;'
                                        value="发布"></div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    {# 确认删除 #}
    <div class="modal fade" id="myModaldel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong
                            id="pubtitle">删除提示</strong></h1>
                </div>
                <div class="modal-body">

                    <div class="clearfix">
                        <div>
                            <div class="form-group">
                                <h2 style="color: red;">删除后，所有与该设备相关的数据将会被删除</h2>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button id="confirmdel" type="button" class="btn btn-danger">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}




    <script>
        $(document).ready(function () {
            $('#devman').addClass('active')
        });
    </script>
    <script>
        var subid;
        var delid;
        $(function () {
            bindadddev();
            bindsub();
            bindbtnpub();
            bindpubbtn();
            binddevdel();
            bindconfirmdel();
            bindpubopen();
            bindpubclose();
        })

        function binddevdel() {
            $(".btn-del").click(function () {
                $("#myModaldel").modal("show");
                delid = $(this).attr("delid")

            })

        }

        function bindconfirmdel() {
            $("#confirmdel").click(function () {
                location.href = '/web/dev/del/?nid=' + delid
            })
        }

        function bindbtnpub() {
            $('.pubbtn').click(function () {
                var mid = $(this).attr('mid')
                $('#pubtitle').attr("mid", mid)
                $('#myModalsub').modal("show");
            })
        }

        function bindpubbtn() {
            $('#pubdata').click(function () {
                var mid = $("#pubtitle").attr("mid")
                var data = $('#senddata').val();
                $.ajax({
                    url: "/web/man/pub/",
                    type: "POST",
                    data: {"mid": mid, "data": data},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes').text("发布成功")
                            $('#senddata').val('')

                        } else {
                            $('#sendmes').text("发布失败请检查data")
                        }
                        var time1 = 1
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes').text("")
                            }
                        }, 1000)
                    }
                })

            })
        }

        function bindpubopen() {
            $('#pubopen').click(function () {
                var mid = $("#pubtitle").attr("mid")
                var data = $('#senddata').val();
                $.ajax({
                    url: "/web/man/pub/",
                    type: "POST",
                    data: {"mid": mid, "data": 'open'},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes').text("发布成功")
                            $('#senddata').val('')

                        } else {
                            $('#sendmes').text("发布失败请检查data")
                        }
                        var time1 = 1
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes').text("")
                            }
                        }, 1000)
                    }
                })

            })
        }

        function bindpubclose() {
            $('#pubclose').click(function () {
                var mid = $("#pubtitle").attr("mid")
                var data = $('#senddata').val();
                $.ajax({
                    url: "/web/man/pub/",
                    type: "POST",
                    data: {"mid": mid, "data": 'close'},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes').text("发布成功")
                            $('#senddata').val('')

                        } else {
                            $('#sendmes').text("发布失败请检查data")
                        }
                        var time1 = 1
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes').text("")
                            }
                        }, 1000)
                    }
                })

            })
        }

        function bindadddev() {
            $('#adddev').click(function () {
                $('#myModal').modal('show');

                document.getElementById("id_mobile_phone").value ={{ request.tracer.mobile_phone }};
                document.getElementById("id_mobile_phone").readOnly = true;

            });
        }

        function bindsub() {
            $(".btn-subb").click(function () {
                subid = $(this).attr('mid');
                $.ajax({
                    url: "/web/device/sub/",
                    type: "GET",
                    data: {'subid': subid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            document.getElementById(subid + "a").innerText = "订阅中";
                        } else {
                            document.getElementById(subid + "a").innerText = "未订阅";
                        }
                    }
                })
            })


        }

    </script>
    <script>
        $(function () {
            bindformSub();
        })

        function bindformSub() {
            $('#formSub').click(function () {
                $('.error-msg').empty();
                $.ajax({
                    url: "/web/device/add/",
                    type: "POST",
                    data: $('#formadd').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {

                            $('#myModal').modal('hide');
                            location.href = res.data;

                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>

{% endblock %}